<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="/public/css/main.css" type="text/css"/>
<link rel="stylesheet" href="/public/css/demos.css" type="text/css"/>
<link rel="stylesheet" href="/public/css/jquery.Jcrop.css" type="text/css"/>
<div style="margin-top:30px">
    <img class="post-avatar"
         alt="{{.Model.Object.Name}}" src="{{.Model.Thumbnail}}"
         height="48" width="48">
    <img src="{{.Model.Url}}" id="target" alt="{{.Model.Object.Name}}"/>

    <form id="coords"
          class="coords"
          onsubmit="return false;"
          action="/image/edit">
        <input type="hidden" id="x1" name="x1"/>
        <input type="hidden" id="y1" name="y1"/>
        <input type="hidden" id="x2" name="x2"/>
        <input type="hidden" id="y2" name="y2"/>
        <input type="hidden" id="w" name="w"/>
        <input type="hidden" id="h" name="h"/>
        <input type="hidden" id="objId" name="objId" value="{{.Model.Id}}"/>
        {{with .Model}}
        {{.Object | renderform}}
        {{end}}
        {{.Model | renderform}}
    </form>
</div>
<script type="text/javascript">
 jQuery(function($){

    var jcrop_api;

    $('#target').Jcrop({
      onChange:   showCoords,
      onSelect:   showCoords,
      onRelease:  clearCoords
    },function(){
      jcrop_api = this;
    });

    $('#coords').on('change','input',function(e){
      var x1 = $('#x1').val(),
          x2 = $('#x2').val(),
          y1 = $('#y1').val(),
          y2 = $('#y2').val();
      jcrop_api.setSelect([x1,y1,x2,y2]);
    });

  });

  // Simple event handler, called from onChange and onSelect
  // event handlers, as per the Jcrop invocation above
  function showCoords(c)
  {
    $('#x1').val(c.x);
    $('#y1').val(c.y);
    $('#x2').val(c.x2);
    $('#y2').val(c.y2);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function clearCoords()
  {
    $('#coords input').val('');
  };







</script>